<template>
  <div class="to-app">
    <div class="center">
      <div class="content">
        <p>即将离开微信</p>
        <p>打开“天天老友”</p>
      </div>
      <div class="btn">
        <a @click="cancel">取消</a>
        <a @click="sure">允许</a>
      </div>
    </div>
    <div class="tip-bottom">
      <img class="tip-bottom-img"
           src="../img/logo.png" />
      <div class="title-box">
        <span class="title-bot-text">天天老友</span>
        <span class="title-bot-text">“友”你不孤单</span>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  mounted () {
    // setTimeout(() => {

    //   this.$router.push({
    //     path: 'download'
    //   })
    // }, 2000);
  },
  methods: {
    cancel () {
      window.close()
    },
    sure () {
      window.location = "ttlaoyouapp://note"
    }
  }
}
</script>
<style scoped lang="less">
.to-app {
  width: 100%;
  position: fixed;
  height: 100%;
  background-image: url('../img/background.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
.tip-bottom {
  align-items: center;
  display: flex;
  transform: translateX(25%);
  position: fixed;
  bottom: 0.3rem;
  width: 100%;
  height: 1.24rem;
  text-align: center;
  &-img {
    width: 0.96rem;
    height: 0.96rem;
    margin-right: 0.22rem;
    vertical-align: middle;
  }
}
.title-box {
  span:first-child {
    font-size: 0.4rem;
  }
  span:last-child {
    font-size: 0.3rem;
    color: #eee;
  }
}
.title-bot-text {
  display: block;
  font-size: 0.3rem;
  line-height: 0.5rem;
  color: #333;
}
.center {
  width: 80%;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #ddd;
  color: #333;
  font-size: 0.3rem;
  background: #fff;
  .content {
    text-align: center;
    padding: 1rem 0 0.2rem;
    border-bottom: 1px solid #ddd;
  }
  .btn {
    text-align: center;
    display: flex;
    a {
      padding: 0.2rem 0;
    }
    a:first-child {
      width: 50%;
      border-right: 1px solid #ddd;
    }
    a:last-child {
      flex: auto;
      color: red;
    }
  }
}
</style>
